<template>
  <a-col class="banner">
    <a-col :span="10">
      <a-typography-title :heading="5" style="margin-top: 0">
        {{ greetingMessage }}
        <!--        <smiling-face
                    theme="multi-color"
                    size="24"
                    :fill="['#333' ,'#f5a623' ,'#FFF' ,'#43CCF8']"
                    style="margin: 0 8px;"  &lt;!&ndash; 适当的左右间距 &ndash;&gt;
                />-->
        {{ randomSentence }}
      </a-typography-title>
    </a-col>
    <a-divider class="panel-border" />
  </a-col>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  // 存储显示的句子和问候语
  const randomSentence = ref<string>('');
  const greetingMessage = ref<string>('');

  // 获取随机句子的接口
  const fetchRandomSentence = async () => {
    try {
      const response = await fetch('https://v1.hitokoto.cn/');
      const data = await response.json();
      randomSentence.value = data.hitokoto;
    } catch (error) {
      console.error('Error fetching random sentence:', error);
    }
  };

  // 每小时切换一次随机句子
  const startSentenceSwitcher = () => {
    fetchRandomSentence();
    setInterval(() => {
      fetchRandomSentence();
    }, 3600000); // 每1小时请求一次
  };

  // 显示问候语，可以定制化
  const updateGreetingMessage = () => {
    const currentHour = new Date().getHours();
    if (currentHour < 12) {
      greetingMessage.value = '早上好';
    } else if (currentHour < 18) {
      greetingMessage.value = '下午好';
    } else {
      greetingMessage.value = '晚上好';
    }
  };

  onMounted(() => {
    updateGreetingMessage();
    startSentenceSwitcher();
  });
</script>

<style scoped lang="less">
  .banner {
    width: 100%;
    padding: 20px 20px 0 20px;
    background-color: var(--color-bg-2);
    border-radius: 4px 4px 0 0;
  }

  /* 图标自定义样式，可以根据需要调整 */
  smilng-face {
    margin: 0 8px;
  }
</style>
